<template>
  <div class="contentWrapper">
    <div class="contentTitle">
      <div class="title">职业报告</div>
      <el-tabs v-model="currentTab" @tab-click="handleClickTab">
        <el-tab-pane label="职业报告" name="report"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="contentContainer" v-if="currentTab == 'report'">
      <div class="contentTop">
        <div class="downloadBtn" v-if="fileUrl">
          <el-button round plain size="mini" @click="handleDownloadClick">
            <img
              src="//img3.job1001.com/careerPathBack/images/download.svg?v=1"
              alt=""
            />下载</el-button
          >
        </div>
      </div>
      <div class="contentMain" v-loading="pdfLoading">
        <template v-if="fileUrlType !== 'empty'">
          <div :class="['officeWrapper']" style="width: 900px">
            <el-scrollbar class="scroll">
              <vue-office-pdf
                :src="fileUrl"
                @rendered="renderedHandler"
                @error="errorHandler"
                v-if="fileUrlType === 'pdf'"
              />
              <vue-office-docx
                :src="fileUrl"
                @rendered="renderedHandler"
                @error="errorHandler"
                v-if="fileUrlType === 'word'"
              />
              <img
                :src="fileUrl"
                style="width: 100%; height: auto"
                alt=""
                v-if="fileUrlType === 'img'"
              />
            </el-scrollbar>
          </div>
          <div class="fileOverview" v-if="fileList.length">
            <div class="overViewTitle">文件预览</div>
            <ul style="height: 100%; overflow-y: auto">
              <li
                v-for="(item, index) in fileList"
                :key="index"
                @click="changeFileUrl(item, index)"
                :class="[activeLiIndex === index ? 'activeLi' : 'fileLi']"
              >
                {{ index + 1 }} {{ item.positionName }}
              </li>
            </ul>
          </div>
        </template>
        <Empty v-else />
      </div>
    </div>
  </div>
</template>
<script>
import VueOfficePdf from "@vue-office/pdf";
import VueOfficeDocx from "@vue-office/docx";
import { download } from "@/utils/fileSaver";
import { careerReport } from "@/api/index";
import { judgeFileType } from "@/utils/judgeFileType";

export default {
  name: "Disc",
  components: {
    VueOfficePdf,
    VueOfficeDocx,
  },
  props: {
    selectedRow: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      fileName: "",
      activeLiIndex: "",
      fileUrl: "",
      fileUrlType: "empty",
      userId: "",
      pdfLoading: true,
      fileList: [],
      currentFileId: "",
      currentFileName: "",
      currentTab: "report",
    };
  },
  created() {
    this.careerReportFn();
  },
  methods: {
    careerReportFn() {
      this.pdfLoading = true;
      const params = {
        personId: this.selectedRow.personId,
      };
      careerReport(params).then((res) => {
        if (res.code == 200 && Array.isArray(res.data) && res.data.length) {
          this.fileList = res.data;
          this.changeFileUrl(res.data[0], 0);
        } else {
          this.pdfLoading = false;
        }
      });
    },
    handleClickTab(tab) {
      this.currentTab = tab.name;
    },
    changeFileUrl(item, index) {
      if (this.activeLiIndex === index) return;
      this.pdfLoading = true;
      this.fileUrl = item.pdfUrl;
      this.fileUrlType = judgeFileType(this.fileUrl);
      if (this.fileUrlType === "empty" || this.fileUrlType === "img") {
        this.pdfLoading = false;
      }
      this.currentFileId = item.id;
      this.currentFileName = item.positionName;
      this.activeLiIndex = index;
    },
    handleDownloadClick() {
      download(this.fileUrl, this.currentFileName);
    },
    renderedHandler() {
      this.pdfLoading = false;
    },
    errorHandler() {
      this.$message.info("pdf正在渲染中...");
      this.pdfLoading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.contentWrapper {
  height: 100%;
  .contentTitle {
    margin-bottom: 17px;
    display: flex;
    align-items: center;
    .title {
      font-size: 22px;
      font-family: PingFang-SC, PingFang-SC;
      font-weight: 800;
      color: #222222;
      line-height: 30px;
    }
    /deep/ .el-tabs {
      flex: 1;
    }
    /deep/ .el-tabs__item {
      font-size: 16px;
    }
    /deep/ .el-tabs__header .el-tabs__nav-wrap {
      padding: 0;
      margin-left: 30px;
    }
  }
  .contentContainer {
    height: calc(100% - 62px);
    .contentTop {
      display: flex;
      align-items: center;
      margin-bottom: 14px;
      position: relative;
      .contentSmallTitle {
        font-size: 18px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #222222;
        line-height: 25px;
        margin-right: 26px;
        &::before {
          content: "";
          display: inline-block;
          width: 5px;
          height: 15px;
          background: #7052ff;
          border-radius: 100px;
          margin-right: 8px;
        }
      }

      .downloadBtn {
        margin-left: 14px;
        /deep/.el-button.is-round {
          background-color: transparent;
        }
        .svg-icon {
          font-size: 16px;
          margin-right: 5px;
        }
      }
      img {
        width: 16px;
        height: 16px;
        margin-right: 5px;
      }
    }
    .contentMain {
      width: 100%;
      height: calc(100% - 62px);
      .officeWrapper {
        border-radius: 8px 0px 8px 8px;
        border: 1px solid #e6e5e7;
        overflow: hidden;
      }
      display: flex;
      /deep/.vue-office-pdf-wrapper {
        background-color: #ffffff !important;
        width: 100%;
        overflow: hidden;
      }
      /deep/ .docx-wrapper {
        background-color: #ffffff !important;
        width: 100%;
        overflow: hidden;
      }
      /deep/.vue-office-pdf {
        overflow-x: hidden;
      }
      /deep/ .vue-office-docx {
        overflow-x: hidden;
      }

      .scroll {
        height: 100%;
        .uploadNewFileBtn {
          display: flex;
          flex-direction: row;
          justify-content: center;
          margin-top: 23px;
          .svg-icon {
            font-size: 16px;
          }
          /deep/.el-button.is-round span {
            color: #ffffff;
          }
          /deep/.el-button--primary.is-plain {
            color: #7052ff;
            background: #7052ff;
            border-color: #7052ff;
            width: 130px;
            height: 40px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            font-size: 14px;
          }
          span {
            margin-left: 5px;
            color: #ffffff;
          }
        }
      }
    }
    .result-content {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 90%;
      .qrCode-container {
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .tips {
          color: #888;
          margin-top: 14px;
        }
      }
    }
  }
  .fileOverview {
    position: relative;
    .overViewTitle {
      width: 109px;
      height: 22px;
      font-size: 16px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #222222;
      line-height: 22px;
      position: absolute;
      margin-top: -30px;
    }
  }
  .fileLi,
  .activeLi {
    padding-left: 15px;
    cursor: pointer;
    font-size: 16px;
    font-family: PingFang-SC, PingFang-SC;
    line-height: 30px;
    height: 30px;
    width: 163px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin-bottom: 12px;
  }
  .fileLi {
    color: #888888;
  }
  .activeLi {
    background: #f2e9ff;
    color: #7052ff;
  }
}
::v-deep .el-button.is-round {
  span {
    display: flex;
    align-items: center;
  }
}
</style>
